<template>
  <div>
<div style="position: sticky;top:0;left: 0;z-index: 999">
  <van-nav-bar
      title="商品列表"
      left-arrow
      @click-left="onClickLeft"
  />
  <!--  选型卡  -->
  <van-dropdown-menu >
    <van-dropdown-item v-model="value1" :options="option1" />
    <van-dropdown-item @change="change" v-model="value2" :options="option2" />
  </van-dropdown-menu>
</div>
<!--   触底加载 -->
      <van-list
          @load="onLoad"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
      >
        <div v-for="(item,index) in list" :key="index" @click="setShopId(item,item.goods_id)" style="border:4px #ccc solid" >
          <div class="box">
            <div>
              <img style="width: 100%;border:1px silver solid;border-radius:20px;overflow: hidden" :src="item.goods_big_logo==''?'http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg':item.goods_big_logo" alt="">
            </div>
            <div>
              <div class="name">{{item.goods_name}}</div>
              <div class="price">￥: <span class="fon">{{item.goods_price}}</span></div>
            </div>
            <div>
              <van-button type="warning" round size="large" @click="setShopId(item,item.goods_id)">立即购买</van-button>
            </div>
          </div>
        </div>
      </van-list>
  </div>
</template>

<script>
import request from "../api/request";
import {Toast} from "vant";
export default {
  name: "shoplist",
  data(){
    return{
      loading: false,
      finished: false,
      Id:'',
      list:[],
      value1:0,
      value2: 'a',
      pagenum:1,
      pagesize:10,
      option1: [
        { text: '全部商品', value: 0 },
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '价格高低排序', value: 'b' },
        { text: '价格低高排序', value: 'c' },
      ],
    }
  },
  created() {
    let {id}=this.$route.query.id;//二级列表id
    this.Id=id;
    this.getdata(id);
  },
  methods:{
    onClickLeft(){
      this.$router.back()
    },
    setShopId(item,id){
      this.$store.commit('footprint/setfootprint',item);//添加到我的足迹
      this.$router.push({
        path:`/details/${id}`,
      })
    },
    getdata(){
      this.p++;
      request.get('/goods/search',{'query':this.$route.query.Str||'',"id":this.Id||[],"pagenum":this.pagenum,"pagesize":this.pagesize}).then(res=>{
        if(res.data.message.goods.length){
          this.list = [...this.list,...res.data.message.goods];
          this.loading=false;
        }else{
          this.finished = true;
        }
      })
    },
    onLoad() {
      this.getdata();
    },
    change(value){
      switch(value) {
        case 'a':
          let {id}=this.$route.params
          this.getdata(id)
          break;
        case 'b':
          this.list.sort((a, b)=>{
            return b.goods_price-a.goods_price
          })
          break;
        case 'c':
          this.list.sort((a, b)=>{
            return a.goods_price-b.goods_price
          })
          break;
      }
    }
  }
}
</script>

<style scoped lang="less">
.box{.fon{color:red};.price{margin-bottom:10px};display: flex;justify-content:space-between;flex-direction: column;padding:20px;box-sizing: border-box;.name{text-indent:2rem;margin:10px 0}}

</style>